

import React, { useRef, useEffect } from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Button,
    Animated,
    Image,
    ImageBackground,
    TouchableWithoutFeedback,
    Clipboard
} from 'react-native';


import colors from '../assets/colors.json'
import pics from '../assets/pics.js'

import Svg, {
    Circle,
    Rect,
    Ellipse,
    G,
    TSpan,
    TextPath,
    Path,
    Polygon,
    Polyline,
    Line,
    Use,
    Symbol,
    Defs,
    LinearGradient,
    RadialGradient,
    Stop,
    ClipPath,
    Pattern,
    Mask,
} from 'react-native-svg';

const ColorsPage = function () {
    let color = colors[Math.floor(Math.random() * colors.length)]
    const [mainColor, setMainColor] = React.useState(color);
    const [subColor, setSubColor] = React.useState(color.colors[0]);

    function MainColors({ setColor, isMain, colors }) {
        return colors.map(c => {

            let sel = false;
            if (isMain) {
                if (c.id == mainColor.id) {
                    sel = true;
                }
            } else {
                if (c.hex == subColor.hex) {
                    sel = true
                }
            }


            return <TouchableWithoutFeedback key={c.id} onPress={() => {
                setColor(c);
                if (isMain) {
                    this.subScroll.scrollTo({ x: 0 });
                    setSubColor(c.colors[0])
                }
            }}>
                <View style={[sel ? styles.colorItemSel : styles.colorItem, { backgroundColor: c.hex }]}>
                    <Text style={[styles.colorItemName, { textShadowColor: '#ffffff', textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 1 }]}>{c.name}</Text>
                </View>
            </TouchableWithoutFeedback>
        }


        )
    }
    function SubColors({ setColor, isMain, colors }) {
        return colors.map(c => {

            let sel = false;
            if (isMain) {
                if (c.id == mainColor.id) {
                    sel = true;
                }
            } else {
                if (c.hex == subColor.hex) {
                    sel = true
                }
            }


            return <TouchableWithoutFeedback key={c.id} onPress={() => {
                setColor(c);
                if (isMain) {
                    this.subScroll.scrollTo({ x: 0 });
                    setSubColor(c.colors[0])
                }
            }}>
                <View style={[sel ? styles.subColorItemSel : styles.subColorItem, { backgroundColor: c.hex }]}>

                    <Svg height="100%" width="100%" >


                        <Defs>
                            <LinearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
                                <Stop offset="0%" stopColor={subColor.hex} stopOpacity="1" />
                                <Stop offset="100%" stopColor={c.hex} stopOpacity="1" />
                            </LinearGradient>


                        </Defs>
                        <Rect
                            x="0"
                            y="0"
                            width="80"
                            height="150"
                            // stroke="red"
                            // strokeWidth="2"
                            fill="url(#grad)"
                        />
                        <View style={{ width: '100%', height: '100%', flexDirection: 'column', justifyContent: 'flex-start' }}>
                            <Text style={[styles.subColorItemName, { textShadowColor: '#ffffff', textShadowRadius: 1 }]}>{c.name}</Text>
                            <Text style={[{ textShadowColor: '#ffffff', textShadowRadius: 1 }]}>{c.hex}</Text>
                            <Image resizeMode="contain" style={{ height: 100,width:100 }} source={pics[c.figure]}></Image>
                        </View>

                    </Svg>

                </View>

            </TouchableWithoutFeedback>
        }


        )
    }
    function randMain() {
        let color = colors[Math.floor(Math.random() * colors.length)]
        console.log('main color', color)
        setMainColor(color)
        randSub(color.colors[0]);
    }

    function randSub(color) {
        color = color || mainColor.colors[Math.floor(Math.random() * mainColor.colors.length)]
        console.log('sub color', color)
        setSubColor(color)
    }
    function setClipboard(str) {
        Clipboard.setString(str);
    }

    return (
        <View style={{ flex: 1, backgroundColor: subColor.hex }}>
            {/* <ImageBackground
                resizeMode="repeat"
                style={{ width: "100%", height: '100%' }}
                source={require('../assets/bg.png')}> */}

            <StatusBar backgroundColor={subColor.hex} />
            <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between' }}>
                <View>

                    <View>

                        <Text style={{ fontSize: 40, fontFamily: 'chinese.font' }}>{mainColor.name}</Text>
                        <Text>R:{mainColor.RGB[0]} G:{mainColor.RGB[1]} B:{mainColor.RGB[2]}</Text>
                        <TouchableWithoutFeedback onPress={() => {
                            setClipboard(mainColor.hex)
                        }}>
                            <Text>HEX:  {mainColor.hex}</Text>
                        </TouchableWithoutFeedback>


                    </View>
                    <View>
                        <Text style={{ fontSize: 40, fontFamily: 'chinese.font' }}>{subColor.name}</Text>
                        <TouchableWithoutFeedback onPress={() => {
                            setClipboard(subColor.hex)
                        }}>
                            <Text style={{ fontSize: 20 }}>HEX:  {subColor.hex}</Text>

                        </TouchableWithoutFeedback>
                        <Text style={{ fontSize: 20 }}>{subColor.intro}</Text>
                    </View>
                </View>

                <ImageBackground
                    resizeMode="contain"
                    style={{ width: "100%", height: 400 }}
                    source={pics[subColor.figure]}
                >

                </ImageBackground>

                <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'flex-end' }} >
                    {/* <View style={{ height: 50, flexDirection: 'row', justifyContent: 'flex-start' }}> */}
                    {/* <MainColors colors={mainColor.colors}></MainColors> */}
                    {/* </View> */}
                    <View style={{ height: 210 }}>
                        <ScrollView ref={scrollSub => {
                            this.subScroll = scrollSub
                        }} horizontal={true} centerContent={true} contentContainerStyle={{ height: 200, flexDirection: 'row', justifyContent: 'flex-start' }}>
                            <SubColors colors={mainColor.colors} setColor={setSubColor} ></SubColors>
                        </ScrollView>
                    </View>

                    <View style={{ height: 55 }}>
                        <ScrollView horizontal={true} centerContent={true} contentContainerStyle={{ height: 55, flexDirection: 'row', justifyContent: 'flex-start' }}>
                            <MainColors colors={colors} setColor={setMainColor} isMain={true}></MainColors>

                        </ScrollView>
                    </View>

                    {/* 
            <Button title="随机主颜色" onPress={() => {
              randMain();
            }} color={subColor.hex} style={{}}></Button>
            <Button title="随机颜色" onPress={() => {
              randSub();
            }} color={subColor.hex}></Button> */}
                </View>



            </View>
            {/* </ImageBackground> */}
        </View>
    );
};

const styles = StyleSheet.create({
    colorItem: {
        width: 50,
        height: 50,
        borderRadius: 5,
        borderColor: '#000000',
        borderWidth: 1,
    },
    colorItemSel: {
        width: 50,
        height: 50,
        borderRadius: 5,
        borderColor: '#ffffff',
        borderWidth: 1,

    },

    subColorItem: {
        width: 80,
        height: 200,
        borderRadius: 2,
        borderColor: '#000000',
        borderWidth: 1,
        lineHeight: 150,

    },
    subColorItemSel: {
        width: 80,
        height: 200,
        borderRadius: 2,
        borderColor: '#ffffff',
        borderWidth: 1,
        lineHeight: 150,

    },

    colorItemName: {
        lineHeight: 50,
        textAlign: 'center'
    },

    subColorItemName: {
        lineHeight: 20,
        fontSize: 20,
        width: 20,
        textAlign: 'center',
        fontFamily: 'chinese.font'

    },
});

export default ColorsPage;
